<template>
  <h1>桃李不言下自成蹊</h1>
  <h1 v-text="dataSlogan"></h1>
  <button type="button" @click="changeDataSlogan">changeDataSlogan</button>
  <h1 v-text="setupSlogan"></h1>
  <button type="button" @click="changeSetupSlogan">changeSetupSlogan</button>
  <h1 v-text="lhz.realName"></h1>
  <h1 v-text="lhz.slogan"></h1>
  <button type="button" @click="showLhz">showLhz</button>
  <h1 v-text="lsl.realName"></h1>
  <h1 v-text="lsl.slogan"></h1>
  <button type="button" @click="showLsl">showLsl</button>
</template>
<script setup></script>
<script>
import {ref,reactive} from "vue";

export default {
  name: "lhzA",
  data() {
    return {
      dataSlogan: 'dataSlogan'
    }
  },
  methods: {
    changeDataSlogan() {
      this.dataSlogan = 'newDataSlogan'
    }
  },
  setup() {
    const setupSlogan = ref('setupSlogan');
    const lhz = ref({
      realName: '李昊哲',
      slogan: '桃李不言下自成蹊'
    });
    const lsl = reactive({
      realName: '李胜龙',
      slogan: '我爱你中国，亲爱的母亲'
    });
    const changeSetupSlogan = () => {
      setupSlogan.value = 'newSetupSlogan'
    };
    const showLhz = () => {
      lhz.value.realName = '李昊哲李昊哲';
      lhz.value.slogan = '桃李不言下自成蹊,桃李不言下自成蹊';
    };
    const showLsl = () => {
      lsl.realName = '李胜龙李胜龙';
      lsl.slogan = '桃李不言下自成蹊';
    };
    return {
      setupSlogan, changeSetupSlogan,lhz,showLhz,lsl,showLsl
    }
  }
}
</script>

<style scoped>

</style>